<template>
	<el-table-column
		:label="itemConfig.label"
		v-bind="_tableColumnPrototype"
		v-if="_show">
		<template slot-scope="scope">
			<template v-if="hasOwnPrototype(itemConfig, 'columnSlot')">
				<template v-for="(slotName, index) of _columnSlots">
					<slot
						v-if="hasOwnPrototype($slots, slotName)"
						:name="slotName"></slot>
				</template>
				<template v-for="(slotName, index) of _columnSlots">
					<slot
						v-if="hasOwnPrototype($scopedSlots, slotName)"
						:name="slotName"
						:row="scope.row"
						:[`$index`]="scope.$index"></slot>
				</template>
			</template>
			<template v-else>
				<Content
					v-if="!_needValid"
					v-model="scope.row"
					:config="itemConfig"
					:fitContent="
						'fitContent' in itemConfig
							? itemConfig.fitContent
							: true
					"
					:align="_tableColumnPrototype.align"
					:index="scope.$index"
					:state="state"
					fromType="tableCloumns">
					<template v-for="(slotName, index) in _slots" #[slotName]>
						<slot
							:name="slotName"
							v-if="hasOwnPrototype($slots, slotName)"></slot>
					</template>
					<template
						v-for="(slotName, index) in _slots"
						#[slotName]="scope">
						<slot
							v-if="hasOwnPrototype($scopedSlots, slotName)"
							:name="slotName"
							:row="scope.row"
							:[`$index`]="scope.$index"></slot>
					</template>
				</Content>
				<FormItem
					v-if="_needValid"
					v-model="scope.row"
					:config="itemConfig"
					label=" "
					:rulesProp="`${model}[${scope.$index}].${
						itemConfig.rulesProp || itemConfig.prop
					}`"
					:fitContent="
						'fitContent' in itemConfig
							? itemConfig.fitContent
							: true
					"
					:align="_tableColumnPrototype.align"
					fromType="tableCloumns"
					:index="scope.$index"
					:state="state">
					<template v-for="(slotName, index) in _slots" #[slotName]>
						<slot
							:name="slotName"
							v-if="hasOwnPrototype($slots, slotName)"></slot>
					</template>
					<template
						v-for="(slotName, index) in _slots"
						#[slotName]="scope">
						<slot
							v-if="hasOwnPrototype($scopedSlots, slotName)"
							:name="slotName"
							:row="scope.row"
							:[`$index`]="scope.$index"></slot>
					</template>
				</FormItem>
			</template>
		</template>
	</el-table-column>
</template>

<script>
	import Content from '../content/index.vue';
	import FormItem from '../formItem/index.vue';
	export default {
		name: 'ATableColumn',
		components: { Content, FormItem },
		props: {
			config: {
				type: Object,
				default: {},
			},
			state: {
				type: String,
				default: undefined,
			},
			model: {
				type: String,
				default: '',
			},
		},

		computed: {
			itemConfig: {
				get() {
					return this.config ?? {};
				},
				set(val) {
					this.$emit('update:config', val);
				},
			},
			_tableColumnPrototype() {
				return {
					...this._detaultPrototype,
					...(this.itemConfig?.prototype?.tableCloumn ?? {}),
				};
			},
			_detaultPrototype() {
				return {
					align: 'center',
					showOverflowTooltip: false,
				};
			},

			_needValid() {
				return this.hasOwnPrototype(this.itemConfig, 'rules');
			},
			_columnSlots() {
				if (this.Empty(this.itemConfig?.columnSlot)) return [];
				let slots = [];
				if (typeof this.itemConfig.columnSlot == 'function') {
					slots = this.itemConfig.columnSlot({
						row: this.formData,
						index: this.index,
					});
				}
				if (typeof this.itemConfig.columnSlot == 'string') {
					slots = this.itemConfig.columnSlot.split(',');
				}
				if (Array.isArray(this.itemConfig.columnSlot)) {
					slots = this.itemConfig.columnSlot;
				}
				return slots;
			},
			_slots() {
				if (this.Empty(this.itemConfig?.slot)) return [];
				let slots = [];
				if (typeof this.itemConfig.slot == 'function') {
					slots = this.itemConfig.slot({
						row: this.formData,
						index: this.index,
					});
				}
				if (typeof this.itemConfig.slot == 'string') {
					slots = this.itemConfig.slot.split(',');
				}
				if (Array.isArray(this.itemConfig.slot)) {
					slots = this.itemConfig.slot;
				}
				return slots;
			},
			_show() {
				let show = true;
				if (this.hasOwnPrototype(this.itemConfig, 'show')) {
					if (typeof this.itemConfig.show === 'function') {
						show = this.itemConfig.show();
					} else if (typeof this.itemConfig.show === 'boolean') {
						show = this.itemConfig.show;
					}
				}
				return show;
			},
		},
		filters: {},
		data() {
			return {};
		},

		mounted() {},

		methods: {
			hasOwnPrototype(obj, key) {
				if (typeof obj !== 'object') return false;
				return Reflect.has(obj, key);
			},
		},
	};
</script>

<style lang="scss" scoped>
	.popover {
		overflow: hidden;
		text-overflow: ellipsis;
	}
	::v-deep .el-input-number {
		.el-input-number__decrease,
		.el-input-number__increase {
			display: none;
		}
		input {
			padding: 5px;
			text-align: left;
		}
	}
</style>
